<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flower Intelligence settings</title>

    <!-- Load styles -->
    <link rel="stylesheet" href="./options.css" />
    <script type="module" src="./options.js"></script>
  </head>

  <body>
    <div class="mainContainer">
      <div class="mainTitle">Flower Intelligence</div>

      <!-- Global Settings -->
      <div class="settingContainer" id="globalSettingContainer">
        <div class="inputLabel">Remote handoff</div>
        <div class="toggle toggle-on" id="remoteToggle"></div>
      </div>

      <!-- Advanced Settings Toggle Button -->
      <div class="toggleAdvancedButton">▶ Advanced Settings</div>

      <!-- Advanced Settings Section (collapsed by default) -->
      <div class="advancedSection" id="advancedSection">
        <div class="advancedSettingContainer">
          <div class="settingTitle">Thread Summarizer</div>
          <div class="settingContainer" id="summarySettingContainer">
            <div class="inputLabel">User custom system prompt</div>
            <div class="toggle" id="summaryToggle"></div>
          </div>
          <div class="inputContainer" id="summarySetting">
            <div class="inputBox">
              <textarea id="summarizerPrompt" class="labelPlaceholder"></textarea>
            </div>
            <div class="outerButtonContainer">
              <div class="inputHelpText">This prompt will be used to generate email summaries</div>
              <div class="smallButtonContainer" id="defaultSummaryContainer">
                <div class="resetButton" id="defaultSummary">Reset to default</div>
              </div>
            </div>
          </div>
        </div>

        <div class="advancedSettingContainer">
          <div class="settingTitle">Reply Generator</div>
          <div class="settingContainer" id="replySettingContainer">
            <div class="inputLabel">User custom system prompt</div>
            <div class="toggle" id="replyToggle"></div>
          </div>
          <div class="inputContainer" id="replySetting">
            <div class="inputBox">
              <textarea id="replyPrompt" class="labelPlaceholder"></textarea>
            </div>
            <div class="outerButtonContainer">
              <div class="inputHelpText">This prompt will be used to generate email replies</div>
              <div class="smallButtonContainer" id="defaultReplyContainer">
                <div class="resetButton" id="defaultReply">Reset to default</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Save Button -->
      <div class="buttonContainer">
        <div class="saveButton">Save settings</div>
      </div>

      <!-- Footer -->
      <div class="footerContainer">
        <img class="flowerLogo" src="./flower-logo-74.png" />
        <div class="footerText">Powered by <a href="https://flower.ai">Flower Labs</a></div>
      </div>
    </div>
  </body>
</html>
